overviewControls: Limit Dash height to 15% of the overview's

Back when the Dash was vertical, the size of each item was calculated
solely based on the available height. After making the Dash horizontal,
this was swapped by the available width. However, when the height of the
Dash decreases, the current code results in never scaling them up ever
again.

Fix that by making ControlsManagerLayout explicitly pass the maximum Dash
sizes. Remove the 'notify::width' handler that served the same purpose.

Fixes https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/3651

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1638>

diff --git a/js/ui/dash.js b/js/ui/dash.js
index 5d9d7d717da521b13ea1003c566e14768eb138c7..aca1ddfd5c773006a9b82714934594ec5eb6c587 100644 (file)
--- a/js/ui/dash.js
+++ b/js/ui/dash.js
@@ -307,6 +307,7 @@ var Dash = GObject.registerClass({
 }, class Dash extends St.Widget {
     _init() {
         this._maxWidth = -1;
+        this._maxHeight = -1;
         this.iconSize = 64;
         this._shownInitially = false;
 
@@ -346,7 +347,7 @@ var Dash = GObject.registerClass({
 
         this.showAppsButton = this._showAppsIcon.toggleButton;
 
-        const background = new St.Widget({
+        this._background = new St.Widget({
             style_class: 'dash-background',
         });
 
@@ -359,17 +360,11 @@ var Dash = GObject.registerClass({
             source: this._dashContainer,
             coordinate: Clutter.BindCoordinate.WIDTH,
         }));
-        background.add_child(sizerBox);
+        this._background.add_child(sizerBox);
 
-        this.add_child(background);
+        this.add_child(this._background);
         this.add_child(this._dashContainer);
 
-        this.connect('notify::width', () => {
-            if (this._maxWidth !== this.width)
-                this._queueRedisplay();
-            this._maxWidth = this.width;
-        });
-
         this._workId = Main.initializeDeferredWork(this._box, this._redisplay.bind(this));
 
         this._appSystem = Shell.AppSystem.get_default();
@@ -588,7 +583,7 @@ var Dash = GObject.registerClass({
 
         iconChildren.push(this._showAppsIcon);
 
-        if (this._maxWidth === -1)
+        if (this._maxWidth === -1 || this._maxHeight === -1)
             return;
 
         const themeNode = this.get_theme_node();
@@ -607,21 +602,26 @@ var Dash = GObject.registerClass({
 
         // Enforce valid spacings during the size request
         firstIcon.icon.ensure_style();
-        let [, iconWidth] = firstIcon.icon.get_preferred_width(-1);
-        let [, buttonWidth] = firstButton.get_preferred_width(-1);
+        const [, , iconWidth, iconHeight] = firstIcon.icon.get_preferred_size();
+        const [, , buttonWidth, buttonHeight] = firstButton.get_preferred_size();
 
         // Subtract icon padding and box spacing from the available width
         availWidth -= iconChildren.length * (buttonWidth - iconWidth) +
                        (iconChildren.length - 1) * spacing;
 
-        let availSize = availWidth / iconChildren.length;
+        let availHeight = this._maxHeight;
+        availHeight -= this._background.get_theme_node().get_vertical_padding();
+        availHeight -= themeNode.get_vertical_padding();
+        availHeight -= buttonHeight - iconHeight;
+
+        const maxIconSize = Math.min(availWidth / iconChildren.length, availHeight);
 
         let scaleFactor = St.ThemeContext.get_for_stage(global.stage).scale_factor;
         let iconSizes = baseIconSizes.map(s => s * scaleFactor);
 
         let newIconSize = baseIconSizes[0];
         for (let i = 0; i < iconSizes.length; i++) {
-            if (iconSizes[i] <= availSize)
+            if (iconSizes[i] <= maxIconSize)
                 newIconSize = baseIconSizes[i];
         }
 
@@ -970,4 +970,14 @@ var Dash = GObject.registerClass({
 
         return true;
     }
+
+    setMaxSize(maxWidth, maxHeight) {
+        if (this._maxWidth === maxWidth &&
+            this._maxHeight === maxHeight)
+            return;
+
+        this._maxWidth = maxWidth;
+        this._maxHeight = maxHeight;
+        this._queueRedisplay();
+    }
 });

diff --git a/js/ui/overviewControls.js b/js/ui/overviewControls.js
index dcc93bb44f8b6ea49b85651cc232c73f7797d5b1..32388621e9e24fc5c68c4f27a15d3b7e84e870f5 100644 (file)
--- a/js/ui/overviewControls.js
+++ b/js/ui/overviewControls.js
@@ -14,6 +14,7 @@ const WorkspaceThumbnail = imports.ui.workspaceThumbnail;
 const WorkspacesView = imports.ui.workspacesView;
 
 const SMALL_WORKSPACE_RATIO = 0.15;
+const DASH_MAX_HEIGHT_RATIO = 0.15;
 
 var SIDE_CONTROLS_ANIMATION_TIME = Overview.ANIMATION_TIME;
 
@@ -118,7 +119,11 @@ class ControlsManagerLayout extends Clutter.BoxLayout {
         availableHeight -= searchHeight + spacing;
 
         // Dash
-        const [, dashHeight] = this._dash.get_preferred_height(width);
+        const maxDashHeight = Math.round(box.get_height() * DASH_MAX_HEIGHT_RATIO);
+        this._dash.setMaxSize(width, maxDashHeight);
+
+        let [, dashHeight] = this._dash.get_preferred_height(width);
+        dashHeight = Math.min(dashHeight, maxDashHeight);
         childBox.set_origin(0, height - dashHeight);
         childBox.set_size(width, dashHeight);
         this._dash.allocate(childBox);